<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li><input type="text">
        <button>点击变密码框</button>
    </li>
    <li><input type="checkbox" class="checkbox"></li>
    <li>
        <button class="stop">禁用</button>
    </li>
    <li>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">2</option>
        </select>
    </li>
</ul>
<script>
    /*
    表单很多情况，也需要修改属性比如点击眼睛可以看到密码，本质上是把表单类型转换为文本框
    正常的有属性的取值和赋值
    获取：DOM对象.属性名
    设置：DOM对象.属性名=新值
    */
    // 获取元素
    const input = document.querySelector("input")
    const button = document.querySelector("button")
    const checkbox = document.querySelector(".checkbox")
    const stop = document.querySelector(".stop")
    const select = document.querySelector("select")
    //输入框的状态(0表示密码框,1表示文本框)
    let flag = 0

    // 监听元素的keyup事件
    input.addEventListener("keyup", function (e) {
        // 拿到触发事件的input表单元素对象的value
        console.log(e.target) // e.target触发事件的元素----input表单元素
        console.log(e.target.value) // 获取表单输入框的值是通过value
    })

    // 监听元素的点击事件
    button.addEventListener("click", function () {
        if (flag === 0) {
            input.type = "password"
            flag = 1
        } else {
            input.type = "text"
            flag = 0
        }
    })

    // 监听元素的change事件
    checkbox.addEventListener("change", function (e) {
        e.target.checked = e.target.checked
        console.log(e.target.checked)
    })

    stop.disabled = true // true禁用，false不禁用

    // 监听元素的change事件
    select.addEventListener("change",function (e) {
        console.log(e.target.value)
    })
</script>
</body>
</html>